<template>
	<div>
		<!-- 顶部栏 -->
		<mu-appbar title="钱呢">
			<mu-icon-button icon="menu" @click="open('left')" slot="left"/>
		</mu-appbar>
		<router-view>
	        
	    </router-view>
	    <!-- 左弹窗 -->
		<mu-popup position="left" popupClass="demo-popup-left" :open="leftPopup" @close="close('left')">
			<div class = "popMenu">
			  <div class = "avatar">
			    <img src="src/assets/image/avatar.jpg" alt="头像">
			  </div>
			  <div class="username">
			    Monique
			  </div>
			  <div class = "state">
			    <div class="deposit">
			      <p class = "deposit-info">存款</p>
			      <p class = "deposit-detail">￥ 256700</p>
			    </div>
			    <div class="cost">
			      <p class = "cost-info">消费</p>
			      <p class = "cost-detail">￥ 16700</p>
			    </div>
			  </div>
			  <ul class = "menu">
			    <li class="menuItem" @click="close('left')">
			      <router-link to="/index/report" class = "link">
			        <img class = "menuItem-icon" src="src/assets/image/chart.png" alt="">
			        <span class = "menuItem-info">统计大厅</span>
			      </router-link>
			    </li>
			    <li class="menuItem" @click="close('left')">
			      <router-link to="/index/history" class = "link">
			        <img class = "menuItem-icon" src="src/assets/image/recode.png" alt="">
			        <span class = "menuItem-info">历史账单</span>
			      </router-link>
			    </li>
			    <li class="menuItem" @click="close('left')">
			      <router-link to="/index/diary" class = "link">
			        <img class = "menuItem-icon" src="src/assets/image/diary.png" alt="">
			        <span class = "menuItem-info">心情日记</span>
			      </router-link>
			    </li>
			    <li class="menuItem" @click="close('left')">
			      <router-link to="/index/setting" class = "link">
			        <img class = "menuItem-icon" src="src/assets/image/setting.png" alt="">
			        <span class = "menuItem-info">设置</span>
			      </router-link>
			    </li>
			  </ul>
			</div>
		</mu-popup>
	</div>
</template>
<script>
	export default {
		name: 'index',
		data () {
			return {
			  leftPopup: false,
			}
		},
		methods:{
			open (position) {
			  this[position + 'Popup'] = true
			},
			close (position) {
			  this[position + 'Popup'] = false
			}
		},
		watch: {
			topPopup (val) {
			  if (val) {
			    setTimeout(() => {
			      this.topPopup = false
			    }, 2000)
			  }
			}
		},
	}
</script>
<style scoped>
	.mu-appbar{
		background-color: #5DCDBF;
		position: fixed;
	}
	.link{
		display: block;
		width: 100%;
		height: 100%;
	}
	.router-link-active{
		background-color: rgba(41,47,73,.8)
	}
	.popMenu{
		text-align: center;
		width: 100%;
		height: 100%;
		padding-top: 5vh;
	}
	.avatar{
		padding-bottom: 0.1rem;
	}
	.avatar > img{
		width: 1.6rem;
		height: 1.6rem;
		border: 0.05rem solid #ccc;
		border-radius: 50%;
		vertical-align: top;
	}
	.username{
		padding-bottom: 2vh;
	}
	.state{
		display: flex;
	}
	.deposit,.cost{
		flex: 1;
	}
	.deposit{
		border-bottom: 0.03rem solid #5DCDBF;
	}
	.cost{
		border-bottom: 0.03rem solid #F89A67;
	}
	.deposit-info,.cost-info{
		font-size: 0.2rem;
		padding-bottom: 1vh;
	}
	.deposit-detail,.cost-detail{
		font-size: 0.3rem;
		padding-bottom: 2vh;
		color: white;
	}
	.menuItem{
		height: 10vh;
		text-align: left;
		line-height: 10vh;
	}
	.menuItem-icon{
		height: 50%;
		width: auto;
		padding: 0 1vh 0 3vh;
		vertical-align: middle;
	}
	.menuItem-info{
		padding-left: 0.2rem;
		font-size: 0.25rem;
		color: #ccc;
	}
</style>
<style>
  .demo-popup-left {
    width: 70%;
    max-width: 3.75rem;
    height: 100%;
    align-items: center;
    background: url(../assets/image/menu-background.jpg);
    color: #ddd;
  }
</style>